<template>
  <div>
    <el-card>
      <!-- 头部搜索 -->
      <div class="header">
        <div>
          <el-button type="primary" @click="addUser">新增用户</el-button>
        </div>
        <div>{{ searchForm.keyword | truncate(10) }}</div>
        <el-form :model="searchForm" ref="searchForm" inline>
          <el-form-item label="用户名">
            <el-input v-model="searchForm.keyword" placeholder="请输入关键字" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="账号" prop="age"></el-table-column>
        <el-table-column label="所属学院" prop="study"></el-table-column>
        <el-table-column label="班级" prop="class"></el-table-column>
        <el-table-column label="联系方式" prop="phone"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增编辑用户对话框 -->
    <Dialog
      v-if="visible"
      @close="closeDialog"
      @submit="submit"
      :row="row"
      :type="type"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/dialog.vue'
import request from '@/request'
export default {
  components: {
    Dialog,
  },
  data () {
    return {
      visible: false, // 控制对话框显示隐藏
      searchForm: {
        keyword: '',
      },
      tableData: [
        { name: '张三', age: 21, study: '信息', class: '二班', phone: '15312435355' },
        { name: '小李', age: 23, study: '网路', class: '一班', phone: '15312435355' },
        { name: '丽丽', age: 22, study: '经管', class: '一班', phone: '15312435355' },
        { name: '王评', age: 23, study: '艺术', class: '二班', phone: '15312435355' },
        { name: '张鹏', age: 21, study: '体育', class: '一班', phone: '15312435355' },
      ],
      row: {}, //编辑对象
      type: '', //新增or修改
    }
  },
  methods: {
    handleSearch () {
      // 处理搜索逻辑，可以根据关键字过滤数据
      console.log('搜索关键字:', this.searchForm.keyword)
      // 在这里可以根据关键字过滤表格数据，更新 this.tableData
    },
    handleEdit (row) {
      this.row = row
      this.visible = true
      this.type = 'edit'
    },
    handleDelete (index) {
      // 处理删除逻辑
      console.log('删除索引:', index)
      // 在这里可以弹出确认框等操作，然后删除数据
      this.tableData.splice(index, 1)
      // 提示用户
      this.$message.success('删除成功')
    },
    // 新增用户
    addUser () {
      this.visible = true
      this.type = 'add'
      this.row = {}
    },
    // 关闭对话框
    closeDialog () {
      this.visible = false
    },
    submit (form, type) {
      if (type === 'add') {
        // 新增
        this.tableData.unshift(form)
      } else {
        // 编辑
        const index = this.tableData.indexOf(this.row)
        if (index !== -1) {
          this.tableData.splice(index, 1, form)
        }
      }

    },
    // axios获取列表信息
    async getUserList () {
      const res = await request.get('userInfo')
      if (res) {
        this.tableData = res
      }
    }
  },
  created () {
    // 使用axios 进行网络请求获取数据(因为没有接口地址所以这里先不调用请求了)
    // this.getUserList()
  },
  filters: {
    truncate (value, length) {
      if (!value) return ''
      if (value.length <= length) return value
      return value.substring(0, length) + '...'
    },
  },
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
}
</style>
